<template>
  <div class="task-Expired">
    <el-row v-if="TaskList.length">
      <el-col :span="22" :offset="1">
        <el-card
          class="planList"
          v-for="(item, index) in TaskList"
          :key="index"
        >
          <h1>
            <el-button
              v-if="currentTask.value.id === item.id"
              type="danger"
              size="mini"
              >当前任务</el-button
            >
            <el-button
              v-else
              type="primary"
              size="mini"
              @click="handleCurrentTask(item)"
              >点击选中任务</el-button
            >
            <span class="title">{{ item.planName }}</span>
          </h1>
          <ul>
            <li>
              <strong>任务开始时间：</strong>
              <time :datetime="item.planStartTime">{{
                item.planStartTime | formatDate
              }}</time>
            </li>
            <li>
              <strong>任务结束时间：</strong>
              <time :datetime="item.planEndTime">{{
                item.planEndTime | formatDate
              }}</time>
            </li>
            <li class="flex">
              <viewCollectionArea :id="item.id">采集区域</viewCollectionArea>
              <ViewCollectionRequirements :planrequire="item.planRequire"
                >采集要求</ViewCollectionRequirements
              >
              <TaskPerformance>执行情况</TaskPerformance>
              <DataInventory :item="item">数据清单</DataInventory>
            </li>
            <li class="flex card">
              <div class="num"><strong>图斑总数：</strong><span>34</span></div>
              <div class="num"><strong>已审核：</strong><span>34</span></div>
              <div class="num"><strong>已采集：</strong><span>34</span></div>
              <div class="num"><strong>未采集：</strong><span>334</span></div>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="22" :offset="1">
        <p>当前没有过期任务</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import MapLogic from "@/views/Map/CreateMap/mixin/MapLogic";
export default {
  // mixins:[MapLogic],
  name: "Expired",
  props: {
    TaskList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      userInfo: {},
      currentTaskButton: "当前任务",
    };
  },
  components: {
    DataInventory: () =>
      import("../TaskCollect/DataInventory/DataInventory.vue"),
    TaskPerformance: () =>
      import("../TaskCollect/TaskPerformance/TaskPerformance.vue"),
    viewCollectionArea: () =>
      import("../TaskCollect/viewCollectionArea/viewCollectionArea.vue"),
    ViewCollectionRequirements: () =>
      import(
        "../TaskCollect/ViewCollectionRequirements/ViewCollectionRequirements.vue"
      ),
  },
  // created() {
  //     this.$axios
  //         .get("task/task/queryMyPlan", {
  //             params: {
  //                 isExpire: 1,
  //                 pageNumber: 1,
  //                 pageSize: 100,
  //             },
  //         })
  //         .then((res) => {
  //             this.TaskList = res.data?.list;
  //             console.log(this.TaskList)
  //         });
  // },
  computed: {
    ...mapState({
      currentTask: (state) => {
        return state.currentTask.Task;
      },
    }),
  },
  methods: {
    handleCurrentTask(item) {
      // let userInfo = {}
      // if(localStorage.getItem('userInfo')){
      //   userInfo = JSON.parse(localStorage.getItem('userInfo'))
      //   this.userInfo = userInfo;
      // }
      // if(userInfo.userLevel === 3){
      //    this.$message({
      //       type:"warning",
      //       message:"您是区管理员，不能选择任务",
      //       duration:2000
      //    })
      //    return false
      // }
      this.$axios
        .get("task/task/getAListOfPlans?planInfo.Id=" + item.id)
        .then((res) => {
          this.$store.commit("currentTask/setCurrentTask", {
            data: res.data.list[0],
            value: item,
          });
          localStorage.setItem(
            "currentTask/setCurrentTask",
            JSON.stringify({
              data: res.data.list[0],
              value: item,
            })
          );
          this.$emit("filterMapSuccess", {
            data: res.data.list[0],
            value: item,
          });
        });
      //
    },
  },
};
</script>

<style lang="scss">
.task-Expired {
  .planList {
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 0px;

    .title {
      padding: 0 10px;
    }

    .el-card__body {
      padding: 0px 10px;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        line-height: 25px;
      }

      .card {
        background: rgba(100, 100, 100, 0);
        border-radius: 5px;
        padding: 0px 5px;
      }

      .flex {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        > .num {
          box-sizing: border-box;
          margin: 1px 0;

          strong {
            display: inline-block;
            width: 80px;
            text-align: right;
            color: #666;
          }

          display: block;
          width: 50%;
        }
      }
    }
  }
}
</style>
